<template>
  <div>
    <div style="margin:10px 0">
      <el-input style="width:200px" placeholder="请输入手机号" v-model="phoneNumber" @input="handlerChange" suffix-icon="el-icon-search"></el-input>
      <el-button type="primary" style="margin-left:5px" @click="search">搜索</el-button>
    </div>
    <el-table :data="tableData" border stripe :@selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="province" label="省"></el-table-column>
      <el-table-column prop="city" label="市"></el-table-column>
      <el-table-column prop="operator" label="运营商"></el-table-column>
      <el-table-column prop="phoneNumber" label="号码"></el-table-column>
      <el-table-column prop="balance" label="余额"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  const axios = require('axios');
  export default {
    name:'UserList',
    data () {
      return {
        username:"",
        total:0,
        pageNum:1,
        pageSize:10,
        phoneNumber:"",
        tableData: [],
        multipleSelection: [],
        // 表单相关的处理
        dialogFormVisible:false,
        form:{
          username:'',
          email:'',
          phone:'',
          nickname:'',
          address:''
        },
      }
    },
    computed:{

    },
    created(){
      //请求分页查询数据
      // this.load();
    },
    methods: {
      handlerChange(e) {
        console.log(e)
      },
      search(){//此处为异步请求，实现查询分页功能
        axios.get("api/queryBelong", {
          params: {
            phoneNumber: this.phoneNumber,
          }
        }).then(res => {
          this.tableData = res.data.data;
          //请求成功执行
          console.log(tableData);
        }).catch(error => {
          //请求失败执行
          console.log(error);
        })
      },
    }
  }
</script>
